<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../include/taglibs.jsp"%>

<c:url var="jsonPollUrl" value="/json/players/">
	<c:param name="game" value="${game.id}"/>
</c:url>
<c:url var="jsonUnloadUrl" value="/json/games/${game.id}/players" />
<c:url var="jsonMarkUrl" value="/json/boards/">
	<c:param name="game" value="${game.id}"/>
	<c:param name="player" value="${player.name}"/>
</c:url>


<script type="text/javascript">
	var playerList;
	
	var board = [
	<c:set var="row" value="1" scope="page" /> 
	<c:forEach var="rowList" items="${buzzwords}">
		  [
			<c:set var="col" value="1" scope="page" />
			<c:forEach var="buzzword" items="${rowList}">
					${buzzword.marked}
					<c:if test="${col != board.size}">,</c:if>
					<c:set var="col" value="${col+1}" scope="page" />
			</c:forEach>
		  ]
		  <c:if test="${row != board.size}">,</c:if>
		  <c:set var="row" value="${row+1}" scope="page" />
	</c:forEach>
	];

	function updatePlayerList(players) {
		if (players != undefined) {
			var playerListHtml = "";
			for (key in players) {
				playerListHtml += "<li>" + players[key].name + "</li>";
			}
			playerList.html(playerListHtml);
		}
	}

	function pollServer() {
		$.ajax({
			type: "GET",
			url: "${jsonPollUrl}",
			ifModified: true,
			dataType: "json",
			success: updatePlayerList
		});
	}
	
	function reportUnload() {
		$.ajax({
			type: "DELETE",
			url: "${jsonUnloadUrl}",
			dataType: "json"
		});
	}

    $(document).ready(function() {
    	playerList = $("#playerList");
    	
    	$(document).everyTime(${pollInterval}, function(i) {
    		pollServer();
		}, 0);
		
		jQuery(window).bind("beforeunload", function() {
			reportUnload(); 
		});
    });
    
    function updateBoard(row, col) {
    	if (board[row][col]) {
    		jQuery("#row-" + row + "-col-" + col).css("background-color", "red");
    	}
    	else {
    		jQuery("#row-" + row + "-col-" + col).css("background-color", "transparent");
    	}
    }
    
    function mark(row, col) {
    	board[row][col] = !board[row][col];
    	var boardData = JSON.stringify(board);   	
    	$.ajax({
			type: "POST",
			url: "${jsonMarkUrl}",
			dataType: "json",
			data: boardData,
			processData: false,
			success: function(data) {
				updateBoard(row, col);
			}
		});
    }
</script>

<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">

	<table align=center bgcolor=red>
			<tr>
				<td align=center>
					<font  size=7 color=white face=verdana>B I N G O</font>
				</td>
			</tr>
			<tr>
				<td>
					<table align=center bgcolor=red>
						<c:set var="row" value="1" scope="page" />
						<c:forEach var="rowList" items="${buzzwords}">
							<tr bgcolor=white align=center height=80>
								<c:set var="col" value="1" scope="page" />
								<c:forEach var="buzzword" items="${rowList}">
									<td width=80 id="row-${row-1}-col-${col-1}"
									<c:if test="${buzzword.marked}">style="background-color:red;"</c:if>
									>
										<font size=2 color=black><a href="#" onclick="mark(${row-1}, ${col-1})">${buzzword.buzzword}</a></font>
										
									</td>
									<c:set var="col" value="${col+1}" scope="page" />
								</c:forEach>
							</tr>
							<c:set var="row" value="${row+1}" scope="page" />
						</c:forEach>
					</table>
				</td>
			</tr>
		</table>
</div>
<div>
<ul id="playerList" style="border:1px solid gray; height: 500;">
	<c:forEach var="player" items="${game.players}">
		<li>${player.name}</li>
	</c:forEach>
</ul>	
</div>
</div>
</div>

